<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>签到</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      overflow: hidden;
    }
    body {
      background: url('./i/bg2.png');
      background-size: cover;
    }
    .topbar {
      color: white;
      background-color: #FF4F4F;
      padding: 0 10px;
    }
    .topbar * {
      color: white;
      text-decoration: none;
    }
    .topbar td {
      height: 7vh;
    }
    .content {
      text-align: center;
      margin-top: 2vh;
    }
    .content > div:first-child {
      font-weight: bold;
      font-size: 1.2rem;
    }
    .content > div:first-child span {
      color: #FF4F4F;
      font-size: 1.4em;
    }
    .content table {
      width: 60vw;
      table-layout: fixed;
      margin-left: 20vw;
      margin-top: 1vh;
    }
    .content table td {
      position: relative;
    }
    .content table img {
      width: 95%;
    }
    .content table span {
      position: absolute;
      left: 50%;
      top: 42%;
      transform: translate(-50%, -50%);
      color: white;
      font-weight: bold;
      font-size: 1.5rem;
    }
    .content > div:last-child {
      font-size: 0.9rem;
      margin-top: -1vh;
      margin-bottom: 7vh;
    }

    .exchange {
      text-align: center;
    }
    .exchange > div:first-child {
      color: white;
      font-weight: bold;
      font-size: 1rem;
      text-align: left;
      margin-left: 6vw;
      margin-bottom: 1vh;
    }
    .exchange > div:first-child span {
      font-weight: normal;
      font-size: 0.7rem;
    }
    .exchange table {
      width: 95vw;
      margin-left: 2.5vw;
      text-align: center;
      table-layout: fixed;
    }
    .exchange td {
      position: relative;
    }
    .exchange img {
      width: 80%;
    }
    .exchange img ~ span {
      position: absolute;
      left: 50%;
      top: 49%;
      transform: translate(-50%, -50%);
      font-size: 0.8rem;
      font-weight: bold;
      white-space: nowrap;
    }
    .exchange > img:last-child {
      width: auto;
      height: 7vh;
      margin-top: 1vh;
      margin-bottom: 1vh;
    }

    #msg, #msg2 {
      position: relative;
      display: none;
      background: url('i/图片14.png');
      background-size: 100% 100%;
      position: fixed;
      width: 75vw;
      height: 79.1vw;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 8vw;
      box-sizing: border-box;
    }
    #msg .title, #msg2 .title {
      text-align: center;
      font-weight: bold;
      font-size: 1.5rem;
      margin-bottom: 8vw;
    }
    #msg .title ~ div, #msg2 .title ~ div {
      padding: 0px 2vw;
    }
    #msg img {
      height: 7vh;
      position: absolute;
      left: 7vw;
      bottom: 10vw;
    }
    #msg img ~ img {
      left: unset;
      right: 7vw;
    }
    #msg2 img {
      height: 7vh;
      position: absolute;
      left: 50%;
      bottom: 10vw;
      transform: translate(-50%, 0);
    }

    #msgrule {
      position: relative;
      display: none;
      background: url('i/图片11.png');
      background-size: 100% 100%;
      position: fixed;
      width: 85vw;
      height: 102.3vw;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
      padding: 5vw;
      box-sizing: border-box;
    }
    #msgrule .title {
      text-align: center;
      font-weight: bold;
      font-size: 1.5rem;
      margin-bottom: 2vw;
    }
    #msgrule .title ~ div {
      font-size: 0.9rem;
    }
    #msgrule img {
      height: 7vh;
      position: absolute;
      left: 50%;
      bottom: 6vw;
      transform: translate(-50%, 0);
    }
  </style>
</head>
<body>
  <div class="topbar">
    <table width="100%">
      <tr>
        <td width="33.33%"><a id="back" href="#">&lt;返回</a></td>
        <td width="33.34%" style="font-size:1.1rem;text-align:center;">签到</td>
        <td width="33.33%" style="text-align:right"><a id="rule" href="#">活动规则</a></td>
      </tr>
    </table>
  </div>
  <div class="content">
    <div>已累计签到 <span id="days">3</span> 天</div>
    <table>
      <tr>
        <td width="1"><img src="i/图片22.png" /><span>0</span></td>
        <td width="1"><img src="i/图片22.png" /><span>0</span></td>
        <td width="1"><img src="i/图片22.png" /><span>0</span></td>
      </tr>
    </table>
    <div>累计获得<span id="exp">10</span>点经验值</div>
  </div>
  <div class="exchange" id="ex">
    <div>积分抽奖：<span>每次抽奖消耗100点积分</span></div>
    <table>
      <tr>
        <td width="1"><img src="i/图片18.png" /><span>20点</span></td>
        <td width="1"><img src="i/图片18.png" /><span>20点</span></td>
        <td width="1"><img src="i/图片18.png" /><span>20点</span></td>
        <td width="1"><img src="i/图片18.png" /><span>20点</span></td>
        <td width="1"><img src="i/图片18.png" /><span>20点</span></td>
      </tr>
      <tr>
        <td width="1"><img src="i/图片18.png" /><span>40M</span></td>
        <td width="1"><img src="i/图片18.png" /><span>60M</span></td>
        <td width="1"><img src="i/图片18.png" /><span>100M</span></td>
        <td width="1"><img src="i/图片18.png" /><span>600M</span></td>
        <td width="1"><img src="i/图片18.png" /><span>1G</span></td>
      </tr>
    </table>
    <img id="draw" src="i/图片19.png" />
  </div>
  <div class="exchange" id="ex2">
    <div>兑换流量：<span>10点经验值=1M省内流量，最低400点经验值起兑</span></div>
    <table>
      <tr>
        <td onclick="javascript:exchange(400);" width="1"><img src="i/图片21.png" /><span>40M</span></td>
        <td onclick="javascript:exchange(600);" width="1"><img src="i/图片21.png" /><span>60M</span></td>
        <td onclick="javascript:exchange(1000);" width="1"><img src="i/图片21.png" /><span>100M</span></td>
        <td onclick="javascript:exchange(2000);" width="1"><img src="i/图片21.png" /><span>200M</span></td>
      </tr>
    </table>
    <table style="width:74vw;margin-left:13vw">
      <tr>
        <td onclick="javascript:exchange(4000);" width="1"><img src="i/图片21.png" /><span>400M</span></td>
        <td onclick="javascript:exchange(6000);" width="1"><img src="i/图片21.png" /><span>600M</span></td>
        <td onclick="javascript:exchange(10000);" width="1"><img src="i/图片21.png" /><span>1G</span></td>
      </tr>
    </table>
  </div>
  <div id="msg">
    <div class="title"></div>
    <div></div>
    <img id="close1" src="i/图片15.png" />
    <img id="share" src="i/图片16.png" />
  </div>
  <div id="msg2">
    <div class="title"></div>
    <div></div>
    <img id="close3" src="i/图片15.png" />
  </div>
  <div id="msgrule">
    <div class="title">活动规则</div>
    <div>
      累计签到3、8、15、23、30天，分别获得奖励10点、50点、90点、110点、140点经验值；<br>
      累计100点经验值可抽奖一次，10点经验值=1M流量；<br>
      签到中断，累计签到天数中断，签到周期内下次签到继续累计。已获经验值保留在账户中，有效期三个月；<br>
      仅限联通手机号绑定微信的用户参与；<br>
      抽奖抽中积分则立即发送到用户账户；<br>
      流量兑换充值到账后立即生效，当月有效；<br>
      本活动最终解释权归微信WO玩转流量公众号所有。
    </div>
    <img id="close2" src="i/图片12.png" />
  </div>
  <script>
    var days = 3;
    var exp = 400;

    function $(selector) {
      return document.querySelector(selector);
    }

    $('#close1').onclick = function() {
      $('#msg').style.display = 'none';
    };
    $('#close3').onclick = function() {
      $('#msg2').style.display = 'none';
    };
    $('#share').onclick = function() {
      $('#msg').style.display = 'none';
      //
    };

    $('#back').onclick = function() {
      //
    };
    $('#rule').onclick = function() {
      $('#msgrule').style.display = 'block';
    };
    $('#close2').onclick = function() {
      $('#msgrule').style.display = 'none';
    };

    $('#draw').onclick = function() {
      var idx = Math.floor(Math.random() * 10);
      console.log(idx);
      var elem = $("#ex tr:nth-child("+Math.floor(idx/5+1)+") td:nth-child("+(idx%5+1)+")");
      elem.innerHTML = elem.innerHTML.replace('图片18', '图片17');
      setTimeout(function() {
        showMsg("恭喜您！", "您获得了"+elem.innerHTML.match(/<span>(.+?)</)[1]+"奖品");
        elem.innerHTML = elem.innerHTML.replace('图片17', '图片18');
      }, 2000);
    }

    function exchange(cost) {
      if (exp >= cost) {
        var val = Math.floor(cost / 10);
        showMsg2("兑换确认", "您将使用"+cost+"积分兑换"+(val==1000?"1G":val+"M")+"流量");
      } else {
        showMsg2("余额不足", "账户余额不足，无法兑换，请选择其他流量包");
      }
    }

    function showMsg(title, content) {
      $("#msg").style.display = 'block';
      $("#msg .title").innerHTML = title;
      $("#msg .title ~ div").innerHTML = content;
    }
    function showMsg2(title, content) {
      $("#msg2").style.display = 'block';
      $("#msg2 .title").innerHTML = title;
      $("#msg2 .title ~ div").innerHTML = content;
    }

    function render() {
      $("#days").innerHTML = days;
      $("#exp").innerHTML = exp;
      var s = exp;
      for (var i = 3; i >= 1; i--) {
        var t = s % 10;
        $(".content td:nth-child("+i+") span").innerHTML = t;
        s = Math.floor(s / 10);
      }
    }

    render();
  </script>
</body>
</html>